import { useState, useEffect } from 'react'
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import routes from "./router";
import Frame from "./components/Frame/index";
import "./App.css";
import "./index.less";
import { createAppKit } from '@reown/appkit/react'

import { WagmiProvider } from 'wagmi'
import { base, sepolia } from '@reown/appkit/networks'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { useAppKitAccount, useAppKit, useAppKitNetwork, useWalletInfo } from "@reown/appkit/react";
// 0. Setup queryClient
const queryClient = new QueryClient()

// 1. Get projectId from https://cloud.reown.com
const projectId = '139d8473e5e0f785ead6ef4a4da8559a'
// export const BACKEND_API_URL = 'https://app.basedeai.com/';
export const BACKEND_API_URL = 'https://www.basedeai.com/';
// 2. Create a metadata object - optional
const metadata = {
  name: 'DEAI',
  description: 'DEAI',
  url: 'https://www.basedeai.com/', // origin must match your domain & subdomain
  icons: ['https://avatars.githubusercontent.com/u/179229932']
}

// 3. Set the networks
const networks = [base,sepolia]

// 4. Create Wagmi Adapter
const wagmiAdapter = new WagmiAdapter({
  networks,
  projectId,
  ssr: true
})
// 5. Create modal
createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata,
  enableWalletConnect: false,
  features: {
    analytics: false, // Optional - defaults to your Cloud configuration
    email: false,
    swaps: false,
    legalCheckbox: false,
    socials: []
  }
})

function App() {
  useEffect(() => {
    getRemsize();
    window.addEventListener("resize", getRemsize);
    return () => window.removeEventListener("resize", getRemsize);
  }, []);
  const getRemsize = () => {
    const whdef = 100 / 1920;
    let ww = window.innerWidth;
    if (ww >= 1920) {
      ww = 1920;
    } else if (ww <= 768) {
      ww = 768;
    }
    const rem = ww * whdef;
    document.querySelectorAll("html")[0].style.fontSize = rem + "px";
  };
  return (
    <>

      <WagmiProvider config={wagmiAdapter.wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <Router>
            <Frame>
              <Routes>
                {routes.map((item) => {
                  const Component = item.component;
                  return (
                    <Route
                      exact
                      key={item.path}
                      path={item.path}
                      element={<Component />}
                    />
                  );
                })}
                <Route render={() => <Redirect to="/404" />} />
              </Routes>
            </Frame>
          </Router>
        </QueryClientProvider>
      </WagmiProvider>
    </>
  )
}

export default App
